.preview-bar {
  background-color: #fff;
  width: 100%;
  height: 60px;
  box-shadow: 0px 4px 6px 0px rgba(3, 25, 61, 0.05);
  position: fixed;
  top: 70px;
  left: 0;
  z-index: 100;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.preview-bar-placeholder {
  width: 100%;
  height: 60px;
}

.preview-bar-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  height: 60px;
}

.preview-type-switch {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.preview-type-switch>li {
  padding: 0 30px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
}

.preview-type-switch>li.active {
  background-color: #448AF7;
  color: #FFF;
}

.preview-type-switch>li:hover {
  background-color: #448AF7;
  color: #FFF;
}

.quit-preview {
  width: 88px;
  height: 36px;
  background: #DA3D3E;
  border-radius: 4px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.questionnaire-content {
  width: 100%;
  background-color: #F9F9F9;
  padding: 20px 0 90px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  min-height: calc(100vh - 130px);
}

.questionnaire-list {
  background-color: #fff;
  box-sizing: border-box;
  height: 100%;
  border-radius: 5px;
  position: relative;
}

.qr-code-icon{
  width: 36px;
height: 36px;
background-color: rgba(84, 98, 136, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 20px;
right: 20px;
}

.mobile-preview  {
  width: 520px;
  padding: 80px 50px;
  height: 700px;
  overflow-y: auto;
  background: url(../images/preview/iphone-container.png) no-repeat;
  background-size: cover;
}

.questionnaire-content ::-webkit-scrollbar {
  display: none !important;
}

.pc-preview {
  width: 1000px;
  padding: 30px 86px;
}

.questionnaire-list .questionnaire-title {
  text-align: center;
}

.questionnaire-list .questionnaire-title label {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #111111;
}

.questionnaire-list .questionnaire-desc label {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #111111;
  line-height: 22px;
}

.questionnaire-list .el-divider--horizontal {
  height: 3px;
  border-radius: 100%;
  height: 3px;
  background: linear-gradient(to right, rgba(68, 138, 246, .1) 0%, rgba(68, 138, 246, .9) 50%, rgba(68, 138, 246, .1) 100%);
}

.single-choice-question .el-radio {
  display: flex;
  height: 50px;
  align-items: center;
}

.multiple-choice-question .el-checkbox {
  display: table;
  height: 50px;
}

.multiple-input-question .el-form-item__label{
  padding: 0 !important;
}

.multiple-input-question .el-form-item__content {
  margin-bottom: 10px;
}

.image-vote-question{
  width: 100%;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-vote-question-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 50px;
  margin-bottom: 1rem;
  flex: 1;
}

.image-vote-question-item .el-radio{
  margin-top: 20px;
}

